import * as echarts from "echarts";

// 折线图固定配置数据
const lineChartsList = [
  {
    name: "出",
    color: "#FFB89C"
  },
  {
    name: "入",
    color: "#87CDFF"
  }
];

// 获取折线类型
const lineType = lineChartsList.reduce((arr, item) => {
  return arr.concat(item.name);
}, []);

// dataset 字段映射
const dimensionsFieldList = ["name", "enter", "exit"];

/**
 * 多折线图配置处理方法
 * @param {Object} data 传入相关数据
 * @param {String} unit 传入折线图单位
 * @returns {Object} 返回 Echarts Option 配置
 */
export const multipleLineOptionHandler = (data = [], unit = "人") => {
  const seriesList = [];
  lineChartsList.forEach(item => seriesList.push(createLineChart({ ...item })));

  return {
    tooltip: {
      trigger: "axis",
      formatter: params => createTooltip(params, { unit }),
      backgroundColor: "rgba(3, 26, 47, 0.6)",
      textStyle: { color: "#fff", fontSize: 12 }
    },

    legend: {
      top: "10%",
      left: "5%",
      itemGap: 14,
      itemWidth: 10,
      itemHeight: 10,
      data: lineType,
      textStyle: { fontSize: 10, color: "#fff" },
      lineStyle: { width: 0 }
    },

    grid: {
      top: "40%",
      right: "5%",
      bottom: "0%",
      left: "4%",
      padding: "0 0 10 0",
      containLabel: true
    },

    dataset: {
      dimensions: dimensionsFieldList,
      source: data
    },

    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        axisLabel: {
          textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
        }
      }
    ],

    yAxis: {
      type: "value",
      name: unit,
      nameTextStyle: {
        align: "left",
        padding: [0, 0, 0, -18],
        color: "rgba(255, 255, 255, 0.65)"
      },
      splitLine: { show: false },
      axisLabel: {
        textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
      }
    },
    series: seriesList
  };
};

/**
 * 创建折线图配置处理方法
 * @param {Object} options 传入相关配置数据
 * @returns {Object} 返回 Echarts Series Line Option 配置
 */
const createLineChart = (options = {}) => {
  return {
    name: options.name,
    type: "line",
    smooth: true,
    symbol: "roundRect",
    symbolSize: 1,
    areaStyle: {
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: options.color
          },
          {
            offset: 0.8,
            color: "rgba(255, 255, 255, 0)"
          }
        ],
        false
      ),
      shadowBlur: 10,
      opacity: 0.3
    },
    itemStyle: { color: options.color }
  };
};

/**
 * 创建 Tooltip formatter 配置
 * @param {Object} params Tooltip formatter formatterParams 数据
 * @param {Object} options 传入额外相关配置数据
 * @returns {String} 返回 Tooltip formatter 配置
 */
const createTooltip = (formatterParams, options) => {
  const { unit } = options;
  const [enterData, exitData] = formatterParams;
  const { marker: enterMarker, seriesName: enterSeriesName, value } = enterData;
  const { marker: exitMarker, seriesName: exitSeriesName } = exitData;
  const { name, enter, exit } = value;

  const enterContent = `${enterMarker}${enterSeriesName}：${enter} ${unit}`;
  const exitContent = `${exitMarker}${exitSeriesName}：${exit} ${unit}`;

  return `${name}<br />${enterContent}<br />${exitContent}`;
};
